document.addEventListener("DOMContentLoaded", function() {
    const language_trigger = document.querySelector('.tips li:last-of-type');
    const language_list = document.querySelector('.languages');

    const log_switch = document.querySelector('.register_box .login_switch');
    const register_switch = document.querySelector('.login_box .register_switch');
    const register_switch_active = document.querySelector('.register_box');

    // const registerBox = document.querySelector('.register_box');

    language_trigger.addEventListener('mouseover', function() {
        language_list.classList.add('slide_active');
    });
    language_list.addEventListener('mouseleave', function() {
        language_list.classList.remove('slide_active');
    });

    register_switch.addEventListener('click',function(){
        register_switch_active.classList.add('show_registration');
        // updateClipPath();
        
    })
    log_switch.addEventListener('click',function(){
        register_switch_active.classList.remove('show_registration');
        // updateClipPath();
    })

    // registerBox.addEventListener('transitionend', updateClipPath);

    // function updateClipPath() {
    // const login_rect = document.getElementsByClassName('login_box')[0];
    // const register_box = document.getElementsByClassName('register_box')[0];

    // const loginRect = login_rect.getBoundingClientRect();
    // const registerRect = register_box.getBoundingClientRect();

    // const overlapLeft = Math.max(0, (registerRect.left -30)- loginRect.left);
    // const overlapTop = Math.max(0, (registerRect.top -30) - loginRect.top);
    // const overlapRight = Math.max(0, (loginRect.right-30) - registerRect.right);
    // const overlapBottom = Math.max(0, (loginRect.bottom -30) - registerRect.bottom);

    // register_box.style.clipPath = `inset(${overlapTop}px ${overlapRight}px ${overlapBottom}px ${overlapLeft}px)`;
    // register_box.style.webkitClipPath = `inset(${overlapTop}px ${overlapRight}px ${overlapBottom}px ${overlapLeft}px)`;
    // }

});




